<template>
	<view class="index">
		<custom-header search @customSerach="handleGoSearchPage" />
		<view class="tabs_operation_wrap">
			<view class="tabs_wrap">
				<view 
					class="list" 
					:class="tab == item.id?'active':''" 
					v-for="(item,index) in tabsList" 
					:key="index"
					@click="handleTab(item)">
					{{ item.name }}
				</view>
			</view>
			<view class="operation_wrap">
				<view class="list" hover-class="custom_hover" :hover-stay-time="200" @click="handleTop">
					<view class="icon">
						<image src="/static/common/top.png" mode="widthFix"></image>
					</view>
					<view class="text">全部上架</view>
				</view>
				<view class="list" hover-class="custom_hover" :hover-stay-time="200" @click="handleBottom">
					<view class="icon">
						<image src="/static/common/bottom.png" mode="widthFix"></image>
					</view>
					<view class="text">全部下架</view>
				</view>
				<view class="list" hover-class="custom_hover" :hover-stay-time="200" @click="handleShowFiltrate">
					<view class="icon">
						<image src="/static/common/screen.png" mode="widthFix"></image>
					</view>
					<view class="text">筛选商品</view>
				</view>
				<view class="list" hover-class="custom_hover" :hover-stay-time="200" @click="handleAddGoods">
					<view class="icon">
						<image src="/static/common/add.png" mode="widthFix"></image>
					</view>
					<view class="text">添加商品</view>
				</view>
				
				<!-- 筛选框 -->
				<view 
					class="filtrate_fixed_wrap"
					:class="{'open':isShowFiltrate}">
					<view class="filtrate_wrap" v-show="isShowFiltrate">
						<view class="f_list_wrap">
							<view class="f_list">
								<view class="lable">价格筛选</view>
								<view class="value">
									<view 
										class="v_list" 
										:class="{'active':item.id == search.priceType}"
										v-for="(item,index) in priceTypeList" 
										:key="index"
										@click="handleSelectPrice(item)">
											{{ item.name }}
									</view>
								</view>
							</view>
							<view class="f_list">
								<view class="lable">状态筛选</view>
								<view class="value">
									<view 
										class="v_list" 
										:class="{'active':item.id == search.status}"
										v-for="(item,index) in statusList" 
										:key="index"
										@click="handleSelectStatus(item)">
											{{ item.name }}
									</view>
								</view>
							</view>
							<view class="f_list">
								<view class="lable">等级筛选</view>
								<view class="value">
									<view 
										class="v_list" 
										:class="{'active':item.id == search.grade}"
										v-for="(item,index) in gradeList" 
										:key="index"
										@click="handleSelectGrade(item)">
											{{ item.name }}
									</view>
								</view>
							</view>
							<view class="f_list">
								<view class="lable">分类筛选</view>
								<view class="value">
									<view 
										class="v_list" 
										:class="{'active':item.id == search.type}"
										v-for="(item,index) in typeList" 
										:key="index"
										@click="handleSelectType(item)">
											{{ item.name }}
									</view>
								</view>
							</view>
						</view>
						<view class="btn_wrap">
							<view
								class="btn cancel" 
								hover-class="cancel_hover" 
								:hover-stay-time="200" 
								@click="handleReset">重置</view>
							<view
								class="btn confirm" 
								hover-class="cancel_hover" 
								:hover-stay-time="200" 
								@click="handleSearch">确定</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view 
			v-show="!isShowFiltrate"
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 170rpx - '+statusBarHeight+'px)'}" 
			class="scroll_content_wrap">
			<view class="_wrap">
				<view class="no_data" v-if="!listData.length && listLoading != 'loading'">
					<view class="img">
						<image src="/static/common/nodata.png" mode="widthFix"></image>
					</view>
					<view class="text">暂无数据</view>
					<view class="btn" hover-class="custom_hover" :hover-stay-time="200" @click="handleAddGoods"> 去添加 </view>
				</view>
				<view class="list_wrap" v-if="listData.length">
					<view class="list" v-for="(item,index) in listData" :key="index">
						<view class="ranking">排名:1</view>
						<view class="info_wrap">
							<view class="img">
								<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg" mode="widthFix"></image>
								<view class="undercarriage" v-if="item.status == 2">
									<text>已下架</text>
								</view>
							</view>
							<view class="info">
								<view class="name_grade">
									<view class="name">卡布奇诺{{item.status}}</view>
									<view class="grade">A级</view>
								</view>
								<view class="other">
									<view class="o1">
										成熟度：中熟
									</view>
									<view class="o2">
										20枝/扎
									</view>
									<view class="o3">
										销量：9999
									</view>
								</view>
								<view class="number_wrap">
									<view class="n1">
										<view class="lable">库存</view>
										<view 
											class="value" 
											hover-class="custom_hover" 
											:hover-stay-time="200" 
											@click="handleShowStock">9999</view>
									</view>
									<view class="n2">
										<view class="lable">起订量</view>
										<view 
											class="value" 
											hover-class="custom_hover" 
											:hover-stay-time="200" 
											@click="handleShowMiniOrder">9999</view>
									</view>
									<view class="price" @click="handleShowSetPrice">
										<view class="price">￥20.00</view>
										<view class="icon">
											<image src="/static/common/edit.png" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cz_wrap">
							<view class="video_wrap">
								<view class="check_success" v-if="item.videoCheckStutas == 1">
									<view class="icon">
										<image src="/static/common/video_success.png" mode="widthFix"></image>
									</view>
									<view class="text">视频已上传</view>
								</view>
								<view class="checking" v-else-if="item.videoCheckStutas == 2">
									<view class="icon">
										<image src="/static/common/checking.png" mode="widthFix"></image>
									</view>
									<view class="text">视频审核中</view>
								</view>
								<view 
									v-else-if="item.status != 2"
									class="upload"
									hover-class="custom_hover" 
									:hover-stay-time="200"
									@click="handleGoUploadVideo(item)">
									<view class="icon">
										<image src="/static/common/video.png" mode="widthFix"></image>
									</view>
									<view class="text">上传视频</view>
								</view>
								
							</view>
							<view class="btn_wrap">
								<view class="activity">
									<view 
										class="title" 
										hover-class="custom_hover" 
										:hover-start-time="0" 
										:hover-stay-time="200" 
										@click="handleShowActivity(index)">
										<view class="text">报活动</view>
										<view class="icon">
											<image src="/static/common/bottom1.png" mode="widthFix"></image>
										</view>
									</view>
									<view class="pull_down_wrap" v-show="item.isShowActivitySelect">
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('seckill',item)">限时秒杀</view>
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('goIndex',item)">上首页</view>
									</view>
								</view>
								<view class="edit">
									<view 
										class="title" 
										hover-class="custom_hover" 
										:hover-start-time="0" 
										:hover-stay-time="200" 
										@click="handleShowEdit(index)">
										<view class="text">编辑</view>
										<view class="icon">
											<image src="/static/common/bottom1.png" mode="widthFix"></image>
										</view>
									</view>
									<view class="pull_down_wrap" v-show="item.isShowEditSelect">
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('edit',item)">修改</view>
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('copy',item)">复制</view>
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('delete',item)">删除</view>
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('top',item)">上架</view>
										<view 
											class="p_option" 
											hover-class="custom_hover" 
											:hover-start-time="0" 
											:hover-stay-time="200" 
											@click="handleSelect('bottom',item)">下架</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loading_wrap" v-if="listLoading == 'loading'">
					<up-loadmore
						:status="listLoading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
				
			</view>
		</scroll-view>
		<!-- 自定义确认弹出层 -->
		<custom-popup 
			:show="isShowPopup" 
			:config="popupConfig"
			@cancel="handlePopupCancel" 
			@confirm="handlePopupConfirm">
		</custom-popup>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false">
		</custom-popup>
		<!-- 调整库存 -->
		<up-popup :show="isShowStock" mode="center" :round="10" @open="handleStockOpen">
			<view class="popup_content_wrap stock_content_wrap">
				<view class="title">调整库存</view>
				<view class="info">
					<view class="name">卡布奇诺</view>
					<view class="grade">A级</view>
					<view class="za">20枝/扎</view>
				</view>
				<view class="count_wrap" v-if="isShowStock">
					<custom-number-box v-model="stockCount" type="number"></custom-number-box>
				</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowStock = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleStockConfirm" 
						:loading="stockBtnLoading"
						:disabled="stockBtnLoading">保存</button>
				</view>
			</view>
		</up-popup>
		<!-- 调整起订单 -->
		<up-popup :show="isShowMiniOrder" mode="center" :round="10" @open="handleMiniOrderOpen">
			<view class="popup_content_wrap stock_content_wrap">
				<view class="title">调整起订单</view>
				<view class="info">
					<view class="name">卡布奇诺</view>
					<view class="grade">A级</view>
					<view class="za">20枝/扎</view>
				</view>
				<view class="count_wrap" v-if="isShowMiniOrder">
					<custom-number-box v-model="miniOrderCount" disabled type="number" />
				</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowMiniOrder = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleMiniOrderConfirm" 
						:loading="miniOrderBtnLoading"
						:disabled="miniOrderBtnLoading">保存</button>
				</view>
			</view>
		</up-popup>
		<!-- 调整售价 -->
		<up-popup :show="isShowSetPrice" mode="center" :round="10" @open="handleSetPriceOpen">
			<view class="popup_content_wrap setPrice_content_wrap">
				<view class="title">调整售价</view>
				<view class="info">
					<view class="name">
						<view class="lable">商品</view>
						<view class="value">
							<text>卡布奇诺</text>
							<text style="padding: 0 20rpx;color: #F5564D;">A级</text>
							<text>10枝/扎</text>
						</view>
					</view>
					<view class="ranking">
						<view class="lable">当前排名</view>
						<view class="value">1</view>
					</view>
					<view class="first">
						<view class="lable">排名第一</view>
						<view class="value">9.50</view>
					</view>
					<view class="suggest">
						<view class="lable">建议价格</view>
						<view class="value">9.45</view>
					</view>
					<view class="adjust">
						<view class="lable">调整价格</view>
						<view class="value">
							<custom-number-box v-model="setPrice" :step="0.1" disabled type="number" />
						</view>
					</view>
				</view>
				<view class="hint">注意：请确认价格无误后保存，改错价格造成损失自行承担。</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowSetPrice = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleSetPriceConfirm" 
						:loading="setPriceBtnLoading"
						:disabled="setPriceBtnLoading">保存</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref,computed,onMounted } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	})
	
	const handleGoSearchPage = ()=>{
		console.log('搜索')
	}
	
	const tab = ref(1)
	const tabsList = ref([
		{ id:1,name:'全部' },
		{ id:2,name:'上架中' },
		{ id:3,name:'下架中' },
	])
	// 选择tabs
	const handleTab = (e)=>{
		console.log(e)
		tab.value = e.id
		loadGetListData()
	}
	
	// 筛选商品
	const isShowFiltrate = ref(false)
	const search = ref({})
	// 状态筛选
	const priceTypeList = ref([
		{ id:1,name:'从低到高' },
		{ id:2,name:'从高到低' }
	])
	// 状态筛选
	const statusList = ref([
		{ id:1,name:'全部' },
		{ id:2,name:'上架' },
		{ id:3,name:'下架' }
	])
	// 等级筛选
	const gradeList = ref([
		{ id:1,name:'全部' },
		{ id:2,name:'A级' },
		{ id:3,name:'B级' },
		{ id:4,name:'C级' },
		{ id:5,name:'D级' },
		{ id:6,name:'E级' }
	])
	// 分类筛选
	const typeList = ref([
		{ id:1,name:'全部' },
		{ id:2,name:'单头玫瑰' },
		{ id:3,name:'多头玫瑰' },
		{ id:4,name:'叶材区' },
		{ id:5,name:'叶材区1' },
		{ id:6,name:'叶材区2' },
		{ id:7,name:'叶材区3' },
	])
	const handleShowFiltrate = ()=>{
		isShowFiltrate.value = !isShowFiltrate.value
	}
	// 选择价格筛选
	const handleSelectPrice = (item)=>{
		search.value.priceType = item.id
	}
	// 选择状态筛选
	const handleSelectStatus = (item)=>{
		search.value.status = item.id
	}
	// 选择等级筛选
	const handleSelectGrade = (item)=>{
		search.value.grade = item.id
	}
	// 选择分类筛选
	const handleSelectType = (item)=>{
		search.value.type = item.id
	}
	// 确定筛选
	const handleSearch = ()=>{
		console.log(search.value)
		isShowFiltrate.value = false
		loadGetListData()
	}
	// 重置筛选
	const handleReset = ()=>{
		search.value = {}
		console.log(search.value)
		isShowFiltrate.value = false
		loadGetListData()
	}
	
	
	// 列表数据
	const listLoading = ref('loadmore')
	const listData = ref([])
	const loadGetListData = ()=>{
		listLoading.value = 'loading'
		listData.value = []
		setTimeout(()=>{
			listData.value = [
				{
					id:1,
					status:2, //1上架 2下架
					videoCheckStutas:null,
					isShowEditSelect:false,
					isShowActivitySelect:false,
				},
				{
					id:2,
					status:1,
					videoCheckStutas:null,
					isShowEditSelect:false,
					isShowActivitySelect:false,
				},
				{
					id:3,
					status:1,
					videoCheckStutas:2,
					isShowEditSelect:false,
					isShowActivitySelect:false,
				},
				{
					id:4,
					status:1,
					videoCheckStutas:1,
					isShowEditSelect:false,
					isShowActivitySelect:false,
				},
				{
					id:5,
					status:1,
					videoCheckStutas:1,
					isShowEditSelect:false,
					isShowActivitySelect:false,
				},
				{
					id:6,
					status:1,
					videoCheckStutas:1,
					isShowEditSelect:false,
					isShowActivitySelect:false,
				}
			]
			listLoading.value = 'loadmore'
		},500)
	}
	
	
	// 弹窗提示
	const isShowToast = ref(false)
	const isShowPopup = ref(false)
	const popupConfig  = ref({})
	const handlePopupCancel = (data)=>{
		isShowPopup.value = false
	}
	const handlePopupConfirm = (data)=>{
		// isShowPopup.value = false
		setTimeout(()=>{
			isShowPopup.value = false
			// 上架、// 下架
			if(data.type == 'top' || data.type == 'bottom'){
				isShowToast.value = true
				popupConfig.value = {
					message:data.type == 'top'?'商品已上架':'商品已下架'
				}
				loadGetListData();
			}
		},3*1000)
	}
	// 上架
	const handleTop = ()=>{
		isShowPopup.value = true
		popupConfig.value = {
			message:'确定全部上架吗?',
			showCancel:true,
			data:{
				type:'top'
			}
		}
	}
	// 下架
	const handleBottom = ()=>{
		isShowPopup.value = true
		popupConfig.value = {
			message:'确定全部下架吗?',
			showCancel:true,
			data:{
				type:'bottom'
			}
		}
	}

	
	// 报活动、编辑
	const handleShowActivity = (cru_index)=>{
		console.log(cru_index)
		listData.value = listData.value.map((item,index)=>{
			if(index === cru_index && !item.isShowActivitySelect){
				item.isShowActivitySelect = true
			}else{
				item.isShowActivitySelect = false
			}
			item.isShowEditSelect = false
			return item
		})
	}
	const handleShowEdit = (cru_index)=>{
		console.log(cru_index)
		listData.value = listData.value.map((item,index)=>{
			if(index === cru_index && !item.isShowEditSelect){
				item.isShowEditSelect = true
			}else{
				item.isShowEditSelect = false
			}
			item.isShowActivitySelect = false
			return item
		})
	}
	const handleSelect = (type,row)=>{
		if(type == 'top'){
			handleTop()
		}else if(type == 'buttom'){
			handleBottom()
		}
		console.log(type)
		console.log(row)
		setTimeout(()=>{
			listData.value = listData.value.map((item,index)=>{
				item.isShowEditSelect = false
				item.isShowActivitySelect = false
				return item
			})
		},100)
		
	}
	
	// 调整库存
	const isShowStock = ref(false)
	const stockBtnLoading = ref(false)
	const stockCount = ref(99)
	const handleShowStock = ()=>{
		isShowStock.value = true
	}
	const handleStockOpen = ()=>{
		console.log('handleStockOpen')
	}
	const handleStockConfirm = ()=>{
		console.log(stockCount.value)
		stockBtnLoading.value = true
		setTimeout(()=>{
			stockBtnLoading.value = false
			isShowStock.value = false
		},1500)
	}
	// 调整起订单
	const isShowMiniOrder = ref(false)
	const miniOrderBtnLoading = ref(false)
	const miniOrderCount = ref(999)
	const handleShowMiniOrder = ()=>{
		isShowMiniOrder.value = true
	}
	const handleMiniOrderOpen = ()=>{
		console.log('handleMiniOrderOpen')
	}
	const handleMiniOrderConfirm = ()=>{
		miniOrderBtnLoading.value = true
		setTimeout(()=>{
			miniOrderBtnLoading.value = false
			isShowMiniOrder.value = false
		},1500)
	}
	
	// 调整售价
	const isShowSetPrice = ref(false)
	const setPriceBtnLoading = ref(false)
	const setPrice = ref(999)
	const handleShowSetPrice = ()=>{
		isShowSetPrice.value = true
	}
	const handleSetPriceOpen = ()=>{
		console.log('handleSetPriceOpen')
	}
	const handleSetPriceConfirm = ()=>{
		setPriceBtnLoading.value = true
		setTimeout(()=>{
			setPriceBtnLoading.value = false
			isShowSetPrice.value = false
		},1500)
	}
	
	
	// 上传鲜花视频
	const handleGoUploadVideo = (item)=>{
		uni.navigateTo({
			url:`/pages/uploadVideo/uploadVideo?id=${item.id}`
		})
	}
	
	// 添加商品
	const handleAddGoods = ()=>{
		uni.navigateTo({
			url:'/pages/addSelectType/addSelectType'
		})
	}
	
	
	onMounted(()=>{
		loadGetListData();
	})
</script>

<style lang="scss">
	.tabs_operation_wrap{
		padding: 0 20rpx;
		height: 170rpx;
	}
	.tabs_wrap{
		display: flex;
		.list{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 32rpx;
			position: relative;
			&.active{
				color: #333333;
				font-weight: bold;
				&::after{
					content: '';
					width: 28rpx;
					height: 8rpx;
					background: #FF3316;
					border-radius: 8rpx;
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					margin-left: -14rpx;
				}
			}
		}
	}
	.operation_wrap{
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		position: relative;
		.list{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border-radius: 8rpx;
			width: 160rpx;
			height: 60rpx;
			.icon{
				width: 20rpx;
				display: flex;
			}
			.text{
				color: #666666;
				font-size: 24rpx;
				padding-left: 10rpx;
			}
			&:nth-child(1){
				.icon{ width:20rpx; }
			}
			&:nth-child(2){
				.icon{ width:20rpx; }
			}
			&:nth-child(3){
				.icon{ width:26rpx; }
			}
			&:nth-child(4 ){
				.icon{ width:24rpx; }
			}
		}
		.filtrate_fixed_wrap{
			position: absolute;
			background: #fff;
			width: 100%;
			top: 90rpx;
			left: 0;
			z-index: 1;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			box-shadow: 0rpx 20rpx 20rpx rgba(0, 0, 0, 0.15);
			transition:all 0.1s ease;
			height: 0;
			&.open{
				height: 70vh;
			}
			.filtrate_wrap{
				height: 100%;
			}
			.f_list_wrap{
				height: calc(100% - 170rpx);
				overflow-y: auto;
				padding: 30rpx 30rpx 0;
				.f_list{
					margin-bottom: 30rpx;
					.lable{
						font-size: 26rpx;
						color:#333;
						font-weight: bold;
					}
					.value{
						display: flex;
						flex-wrap: wrap;
						.v_list{
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 8rpx;
							background: #F5F6F8;
							border: 1rpx solid #F5F6F8;
							color: #666666;
							font-size: 24rpx;
							margin-top: 30rpx;
							margin-right: 50rpx;
							&.active{
								background: #FCEEF0;
								color: #F5564D;
								border: 1rpx solid #F5564D;
							}
						}
					}
				}
			}
			.btn_wrap{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 140rpx;
				line-height: 140rpx;
				padding: 0 30rpx;
				.btn{
					width: 190rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align:  center;
					border-radius: 120rpx;
					font-size: 32rpx;
					padding: 0;
					margin: 0;
				}
				.cancel{
					background: #FFF0F0;
					color: #FE4C20;
					margin-right: 60rpx;
				}
				.confirm{
					background: #F5564D;
					color: #FFFFFF;
				}
			}
		}
	}
	.scroll_content_wrap{
		._wrap{
			padding: 0 20rpx;
			height: 100%;
		}
	}
	.no_data{
		min-height: 98%;
		background-color: #fff;
		border-radius: 10rpx;
		.img{
			width: 280rpx;
			margin: 0 auto;
			padding-top: 300rpx;
		}
		.text{
			color: #999999;
			font-size: 32rpx;
			text-align: center;
			padding: 20rpx 0;
		}
		.btn{
			width: 120rpx;
			height: 48rpx;
			border-radius: 103rpx;
			border: 1px solid #F9502E;
			color:#F9502E;
			font-size: 24rpx;
			text-align: center;
			line-height:48rpx;
			margin:0 auto;
		}
	}
	.loading_wrap{
		padding-bottom: 20rpx;
	}
	.list_wrap{
		padding-bottom: 20rpx;
		.list{
			background: #fff;
			border-radius: 10rpx;
			padding: 0 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			.ranking{
				position: absolute;
				width: 90rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 0rpx 10rpx 0rpx 10rpx;
				background: #FFF0F0;
				top: 0;
				right: 0;
				color: #F5564D;
				font-size: 22rpx;
			}
			.info_wrap{
				display: flex;
				padding: 10rpx 0;
				.img{
					width: 196rpx;
					height: 196rpx;
					position: relative;
					border-radius: 10rpx;
					overflow: hidden;
					.undercarriage{
						position: absolute;
						width: 100%;
						height:100%;
						left: 0;
						top: 0;
						background: rgba(0,0,0,0.4);
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 24rpx;
						border-radius: 10rpx;
					}
				}
				.info{
					flex: 1;
					padding-left: 15rpx;
					.name_grade{
						padding-top: 20rpx;
						display: flex;
						font-size:32rpx;
						.name{
							color: #333333;
							font-weight: bold;
						}
						.grade{
							color:#F5564D;
							padding-left: 20rpx;
						}
					}
					.other{
						display: flex;
						color: #999999;
						font-size: 24rpx;
						padding: 20rpx 0;
						.o2{
							padding: 0 20rpx;
						}
					}
					.number_wrap{
						display: flex;
						align-items: center;
						.n1,.n2{
							display: flex;
							align-items: center;
						}
						.n2{
							padding: 0 15rpx;
						}
						.lable{
							color: #666666;
							font-size: 24rpx;
						}
						.value{
							padding: 2rpx 10rpx;
							text-align: center;
							border-radius: 8rpx;
							background: #F1F1F1;
							font-size: 26rpx;
							color: #333333;
							margin-left: 8rpx;
						}
						.price{
							display: flex;
							color: #C60C0C;
							font-size: 26rpx;
							.icon{
								width: 24rpx;
								margin-left:10rpx;
							}
						}
					}
				}
			}
			.cz_wrap{
				border-top: 2rpx solid #EBEDF0;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				color: #333333;
				font-size: 28rpx;
				.video_wrap{
					.check_success,.checking,.upload{
						display: flex;
						align-items: center;
					}
					.check_success{
						color: #00BAAD;
					}
					.icon{
						width:28rpx;
						display: flex;
					}
					.text{
						padding-left: 10rpx;
					}
				}
				.btn_wrap{
					display: flex;
					.activity,.edit{
						padding: 0 20rpx;
						position: relative;
						.title{
							display: flex;
							align-items: center;
							// .text{}
							.icon{
								padding-left: 10rpx;
								width: 20rpx;
								display: flex;
							}
						}
					}
				}
			}
			
		}
		.pull_down_wrap{
			position: absolute;
			z-index: 1;
			top: 65rpx;
			right: 20rpx;
			// width: 140rpx;
			// height: 130rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 24rpx #ddd;
			width: max-content;
			.p_option{
				padding: 15rpx 20rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}
	
	.popup_content_wrap{
		width: 500rpx;
		padding:0 30rpx;
		.title{
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;
		}
		.btn_wrap{
			display: flex;
			justify-content: center;
			padding: 60rpx 0 30rpx;
			.btn{
				width: 190rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align:  center;
				border-radius: 120rpx;
				font-size: 32rpx;
				padding: 0;
				margin: 0;
			}
			.cancel{
				background: #FFF0F0;
				color: #FE4C20;
				margin-right: 60rpx;
				&.cancel_hover{
					background: #fbdcdc;
				}
			}
			.confirm{
				background: #F5564D;
				color: #FFFFFF;
				&.confirm_hover{
					background: #da4239;
				}
					
			}
		}
		.number-box-input{
			width:180rpx;
			height:65rpx;
			line-height:65rpx;
			margin: 0 10rpx;
			border-radius:4rpx;
			text-align:center;
			font-size:28rpx;
			background:#F1F1F1;
		}
	}
	.stock_content_wrap{
		.info{
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			padding-top: 20rpx;
			.name{
				color: #333333;
				font-weight: bold;
			}
			.grade{
				color:#F5564D;
				padding-left: 20rpx;
				font-weight: bold;
			}
			.za{
				color:#999;
				font-size: 28rpx;
				padding-left: 20rpx;
				padding-top: 6rpx;
			}
		}
		.count_wrap{
			display: flex;
			justify-content: center;
			padding-top: 30rpx;
		}	
	}
	.setPrice_content_wrap{
		width: 620rpx;
		.info{
			padding-top: 10rpx;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #F0F0F0;
			.name,.ranking,.first,.suggest,.adjust{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 30rpx;
				.lable{
					color: #999999;
					font-size: 28rpx;
				}
				.value{
					font-size: 28rpx;
					color: #333333;
				}
			}
			.ranking{
				.value{
					color: #C60C0C;
				}
			}
		}
		.name .value{
			font-weight: bold;
		}
		.hint{
			padding-top: 20rpx;
			color: #C60C0C;
			font-size: 24rpx;
		}
		.btn_wrap{
			justify-content: space-between;
			padding-right: 50rpx;
			padding-left: 50rpx;
			padding-bottom: 50rpx;
		}
	}
</style>
